<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
		<div id="container">
		<div class="search bar">
			<form>
				<input type="text" placeholder="请输入您要搜索的内容..." id="searchBar" oninput="createList(event)">
			</form>
			<div id="perform"></div>
		</div>
	</div>

		<script type="text/javascript">
		function createList(event){
			var xhr = new XMLHttpRequest();
			xhr.open("GET","http://localhost:8088/homework_0801/get?area=" + event.target.value);
			xhr.onreadystatechange=function(){
				if(xhr.status == 200 && xhr.readyState==4){
					var areas = JSON.parse(xhr.responseText);
					var perform = document.getElementById("perform");
					createul(perform,areas);
				}
			};
			xhr.send(null);
		}
		function createul(div,data){
			div.innerHTML = "";
			var ul = document.createElement("ul");
			for(let i=0;i<data.length;i++){
				var li = document.createElement("li");
				li.innerHTML = data[i].area;
				ul.appendChild(li);
			}
			div.appendChild(ul);
		}
		
	</script>
	
</body>
</html>